const boardSize = 600;
const margin = 30; // 边距

let canvas, ctx,points,pieces;

class Piece {
    constructor(x, y, color, type) {
        this.x = x;
        this.y = y;
        this.color = color;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    }
}

const init = () => {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = boardSize + margin * 2;
    canvas.height = boardSize + margin * 2;
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawBoard(boardSize, ctx, margin);
    canvas.addEventListener("click", onCanvasClick);
}

init();

function drawBoard(boardSize, ctx, margin) {
    const gap = boardSize / 6;
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 2;

    // 横线段
    const hLines = [
        [0, 0, boardSize, 0],
        [gap, gap, boardSize - gap, gap],
        [boardSize / 3, boardSize / 3, boardSize - boardSize / 3, boardSize / 3],
        [boardSize / 3, (boardSize / 3) * 2, boardSize - boardSize / 3, (boardSize / 3) * 2],
        [gap, gap * 5, boardSize - gap, gap * 5],
        [0, boardSize, boardSize, boardSize]
    ];

    // 纵线段
    const vLines = [
        [0, 0, 0, boardSize],
        [gap, gap, gap, boardSize - gap],
        [boardSize / 3, boardSize / 3, boardSize / 3, boardSize - boardSize / 3],
        [2 * boardSize / 3, 2 * boardSize / 3, 2 * boardSize / 3, boardSize - 2 * boardSize / 3],
        [gap * 5, gap, gap * 5, boardSize - gap],
        [boardSize, 0, boardSize, boardSize]
    ];

    const midLines = [
        [boardSize / 2, 0, boardSize / 2, gap * 2],
        [boardSize / 2, boardSize - gap * 2, boardSize / 2, boardSize],
        [0, boardSize / 2, gap * 2, boardSize / 2],
        [boardSize - gap * 2, boardSize / 2, boardSize, boardSize / 2]
    ];

    function drawLines(lines, isHorizontal = true) {
        lines.forEach(line => {
            ctx.beginPath();
            if (isHorizontal) {
                ctx.moveTo(line[0] + margin, line[1] + margin);
                ctx.lineTo(line[2] + margin, line[3] + margin);
            } else {
                ctx.moveTo(line[0] + margin, line[1] + margin);
                ctx.lineTo(line[2] + margin, line[3] + margin);
            }
            ctx.stroke();
        });
    }

    drawLines(hLines, true);
    drawLines(vLines, false);
    drawLines(midLines, false);

    // -----------------------
    // 交点
    // -----------------------
    points = [
        { x: 0, y: 0 }, 
        { x: boardSize / 2, y: 0 }, 
        { x: boardSize, y: 0 },
        { x: gap, y: gap }, 
        { x: boardSize / 2, y: gap }, 
        { x: boardSize - gap, y: gap },
        { x: boardSize / 3, y: boardSize / 3 }, 
        { x: boardSize / 2, y: boardSize / 3 }, 
        { x: boardSize - boardSize / 3, y: boardSize / 3 },
        { x: boardSize / 3, y: (boardSize / 3) * 2 }, 
        { x: boardSize / 2, y: (boardSize / 3) * 2 }, 
        { x: boardSize - boardSize / 3, y: (boardSize / 3) * 2 },
        { x: gap, y: gap * 5 }, 
        { x: boardSize / 2, y: gap * 5 }, 
        { x: boardSize - gap, y: gap * 5 },
        { x: 0, y: boardSize }, 
        { x: boardSize / 2, y: boardSize }, 
        { x: boardSize, y: boardSize },
        { x: gap * 2, y: gap * 3 }, 
        { x: gap * 4, y: gap * 3 }, 
        { x: gap, y: gap * 3 }, 
        { x: boardSize - gap, y: gap * 3 },
        { x: 0, y: gap * 3 }, 
        { x: boardSize, y: gap * 3 }
    ];

    // 绘制交点
    points.forEach(point => {
        ctx.beginPath();
        ctx.arc(point.x + margin, point.y + margin, 10, 0, Math.PI * 2);
        ctx.fillStyle = "#fff";
        ctx.fill();
    });
    pieces = points
    return points;
}

function onCanvasClick(event) {
    const rect = canvas.getBoundingClientRect();
    const clickX = event.clientX - rect.left - margin;
    const clickY = event.clientY - rect.top - margin;

    // 遍历交点判断点击是否在棋子半径范围内
    for (let i = 0; i < points.length; i++) {
        const p = points[i];
        const dx = clickX - p.x;
        const dy = clickY - p.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        console.log("点击距离：", distance);
        if (distance <= margin) {
            console.log("点击交点：", p);

            // 检查该点是否已有棋子
            const occupied = pieces.some(piece => piece.x === p.x && piece.y === p.y);
            if (!occupied) {
                // 落子
                const piece = new Piece(p.x, p.y, "#fff"); // 白色棋子
                pieces.push(piece);
                piece.draw();
            }
            return;
        }
    }
}
